<template>
    <div class="cinema-detail">
        <!-- 返回首页/返回上一页 -->
        <div class="cinema-detail-header">
            <div @click="gobackPage()">
                <i class="bi bi-chevron-left"></i>返回
            </div>
            <div>ky影院</div>
            <router-link to='/'>
                <i class="bi bi-house-door"></i> 首页
            </router-link>
        </div>

        <div class="loading-ani" v-if="isLoadingCData||isLoadingMList">
            <com-loading></com-loading>
        </div>

        <!-- 电影院信息 -->
        <div class="cinema-data" v-if='!isLoadingCData&&!isLoadingMList'>
            <div class="cinema-name shortTxt" v-if="cinemaData.nm!=undefined&&cinemaData.nm.length>0">{{cinemaData.nm}}</div>
            <div class="cinema-name shortTxt" v-if="cinemaData.cinemaName!=undefined&&cinemaData.cinemaName.length>0">{{cinemaData.cinemaName}}</div>
            <div class="cinema-loc">{{cinemaData.addr}}</div>
        </div>

        <!-- 电影院放映的电影列表 -->
        <div 
            class="cinema-movie" 
            v-if='!isLoadingCData&&!isLoadingMList&&cMovieList!= undefined&&cMovieList.length>0'>
            <!-- 电影列表的名字，轮播图 -->
            <mv-banner
                :mvList ='cMovieList'
                :firstIndex ='index'
                @changeMovie = 'changeMvIndex'
            ></mv-banner>
            <!-- 选中的名字的详细信息 -->
            <div class="title">
                {{cMovieList[index].nm}}
                <span v-if="!cMovieList[index].globalReleased">{{cMovieList[index].wish}} <b>人想看</b> </span>
                <span v-if="cMovieList[index].globalReleased&&cMovieList[index].sc>0">{{cMovieList[index].sc}} <b>分</b></span>
                <span v-if="cMovieList[index].globalReleased&&cMovieList[index].sc<=0">暂无评分</span>
            </div>
            <div class="mv-info">
                {{cMovieList[index].desc}}
            </div>
            <!-- 电影的购票日期 -->
            <ul class="movie-date inALine">
                <li
                    v-for='item,index2 in cMovieList[index].shows'
                    :key="getSymbol(item)"
                    @click="changeDateIndex(index2)"
                    :class="date_index == index2 ? 'active': ''">
                    {{item.showDate}}
                </li>
            </ul>
            <!-- 这天电影的票 -->
            <div
                class="ticket">
                <!-- {{cMovieList[index].shows[date_index].plist}} -->
                <ul>
                    <li
                        v-for='item in cMovieList[index].shows[date_index].plist'
                        :key="getSymbol(item)">
                            <div class="ticket-time">{{item.tm}}</div>
                            <div class="movie-type">
                                <span>{{item.lang}}</span>
                                <span>{{item.tp}}</span>
                                <div class="cinema-room">
                                    {{item.th}}
                                </div>
                            </div>
                            <div class="ticker-price">
                                <b>￥</b>{{item.baseSellPrice}}
                                <div class="discount-price"
                                    v-if='item.vipPrice!=undefined&&item.vipPrice.length>0'>
                                    <span>{{item.vipPriceName}}</span>
                                    <b>￥</b>{{item.vipPrice}}
                                </div>
                            </div>
                            <div class="btn">购票</div>
                    </li>
                    <li v-if="cMovieList[index].shows[date_index].plist.length==0">
                        暂无当日电影票信息
                    </li>
                </ul>
            </div>
        </div>
        <!-- 若无电影列表 -->
        <div 
            class="no-mv-list"
            v-if="!isLoadingCData&&!isLoadingMList&&(cMovieList== undefined||cMovieList.length==0)">
            暂无该影院上映电影信息
        </div>
    </div>
</template>

<script>
import mvBanner from '@/components/cinemaDetail_view/mvBanner.vue'
import comLoading from '@/components/comLoading.vue'
export default {
    name: 'cinemaDetail',
    data() {
        return {
            cid: Number,
            mid: null, //如果指点电影，开始就放置此电影信息
            cinemaData: [], //电影院信息
            cMovieList: [], //电影院上映的电影列表
            isLoadingCData: true, // 正在加载电影院信息
            isLoadingMList: true, // 正在加载电影列表
            index: 0, // 选中的电影在cMovieList里的下标
            date_index: 0, // 第几天的票
        }
    },
    components: {
        mvBanner,
        comLoading
    },
    methods: {
        // 加载数据
        loadData() {
            this.isLoadingCData = true;
            this.isLoadingMList = true;
            this.axios
                .get('https://apis.netstart.cn/maoyan/cinema/detail?cinemaId='+this.cid)
                .then((success)=>{
                    // console.log(success);
                    this.cinemaData = success.data;
                    this.isLoadingCData = false;
                    // console.log('this.cinemaData',this.cinemaData);
                })
                .catch((err)=>{
                    console.log(err);
                })
            this.axios
                .get('https://apis.netstart.cn/maoyan/cinema/shows?cinemaId='+this.cid+'&ci=20')
                .then((success)=>{
                    console.log(success);
                    if(success.data != undefined && success.data.movies != undefined){
                        this.cMovieList = success.data.movies;
                    }
                    if(this.mid != null){
                        for(let i =0;i<this.cMovieList.length;i++){
                            if(this.cMovieList[i].id == this.mid){
                                this.index = i;
                                break;
                            }
                        }
                    }

                    this.isLoadingMList = false;
                    // console.log('this.cMovieList',this.cMovieList);
                    // console.log('this.cMovieList[0].shows.plist',this.cMovieList[0].shows);
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        // 返回上一页
        gobackPage() {
            this.$router.go(-1);
        },
        // 改变选中的电影下标
        changeMvIndex(i) {
            this.index = i;
        },
        getSymbol(i) {
            return Symbol();
        },
        // 改变购票日期的下标
        changeDateIndex(i) {
            this.date_index = i;
        }
    },
    created() {
        // console.log(this.$route);
        this.cid = this.$route.params.cid;
        if(this.$route.params.mid != undefined){
            this.mid = this.$route.params.mid;
        }
        this.loadData();
    },
    watch: {
        index(newv, oldv) {
            this.date_index = 0;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';

.cinema-detail-header {
    display: flex;
    padding: 15px;
    font-size: 20px;
    justify-content: space-between;
    color: white;
    background-color: $color2;
    position: sticky;
    top: 0px;
    z-index: 9999;
    a {
        color: white;
    }
}
.cinema-data {
    padding: 10px 15px 10px 15px;
    .cinema-name {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 4px;
    }
    .cinema-loc {
        font-size: 18px;
        color: #888;
    }
}
.cinema-movie {
    .title {
        text-align: center;
        padding: 15px;
        padding-bottom: 5px;
        font-size: 20px;
        font-weight: bold;
        span {
            color: $fontColor2;
            font-size: 18px;
            b {
                font-size: 14px;
            }
        }
    }
    .mv-info {
        text-align: center;
        padding: 15px;
        padding-top: 0;
        font-size: 14px;
        color: #888;
    }
    .movie-date {
        li {
            display: inline-block;
            margin: 0px 10px;
            padding: 10px 0px;
            font-size: 16px;
            line-height: 24px;
            font-weight: bold;
            border-bottom: 4px solid transparent;
            &.active {
                color: #F03D37;
                border-bottom: 4px solid #F03D37;
            }
        }
    }
    .ticket {
        li {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #888;
            margin-bottom: -1px;
            font-size: 16px;
            .ticket-time {
                font-size: 20px;
                font-weight: bold;
                width: 70px;
            }
            .movie-type {
                width: 138px;
            }
            .cinema-room {
                color: #888;
                font-size: 12px;
            }
            .ticker-price {
                width: 75px;
                margin: 0 10px;
                b {
                    font-size: 12px;
                }
                .discount-price {
                    color: #F03D37;
                    span {
                        font-size: 14px;
                    }
                }
            }
            .btn {
                width: 46px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                border-radius: 15px;
                color: #F03D37;
                border: 1px solid #F03D37;
                align-self: center;
            }
        }
    }
}
.loading-ani {
    position: fixed;
    width: 100%;
    height: 100%;
}
.no-mv-list {
    padding: 15px;
    font-size: 20px;
    color: #ED3E36;
    font-weight: bold;
}
</style>